<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .swiper {
            width: 1226px;
            margin: 50px auto;
            border: 1px solid #333;
            position: relative;

            .swiper-wrapper {
                display: flex;
                width: fit-content;
                position: relative;

                .swiper-item {
                    width: 1226px;

                    & img {
                        width: 100%;
                    }
                }
            }

            .swiper-pagination {
                display: flex;
                position: absolute;
                right: 50px;
                bottom: 20px;

                & li {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: aliceblue;
                    border: 1px solid rgba(0, 0, 0, 0.5);
                    margin: 0 5px;

                }

                .active {
                    background-color: aquamarine;
                }
            }


        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-item"><img src="../images/1.png" alt=""></div>
            <div class="swiper-item"><img src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/3.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/4.webp" alt=""></div>
        </div>
        <ul class="swiper-pagination">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="../js/animate.js"></script>
<script>
    /* 
        轮播实现步骤
        1. 点击切换
            (1) 四张图片对应四个导航(点)  => 一一对应
            (2) 点第n个导航 显示第n张图片 => swiperWrapper需要向左滚动n-1一张图片(和导航对应的下标对应)



        2. 自动切换
        3. 移入暂停,移出启动
    
    
    */

    var swiper = document.querySelector(".swiper");
    var swiperWrapper = document.querySelector(".swiper-wrapper");
    var liList = document.querySelectorAll(".swiper-pagination li");

    var swiperWidth = swiper.clientWidth;
    var index = 0; // 全局变量 记录轮播的下标(默认显示第一张)
    var timer = null;

    // 点击切换
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onclick = function () {
            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            liList[i].className = "active";

            animate(swiperWrapper, { left: -swiperWidth * i })
        }
    }

    // 自动切换  
    timer = setInterval(function () {
        index++;

        // 超出下标最大值,再反向回滚到第一张  => 代码没问题,用户体验不好,如何让第四张平滑的切换到第一张

        if(index >= liList.length){ // index > liList.length-1
            index = 0;
        }
        for (var j = 0; j < liList.length; j++) {
            liList[j].className = "";
        }
        liList[index].className = "active";
        animate(swiperWrapper, { left: -swiperWidth * index });
    }, 3000)





</script>

</html>